<template>

  <el-dialog :title="id == null ? $t('page-form.form.add') : $t('page-form.form.edit')" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">

    <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="120px" label-position="left" :inline="false" size="mini">

      <el-form-item :label="$t('page.form.highernode')" size="mini" prop="">
        <cascader-system-node ref="cascader-system-node" v-model="mainQuery.parentId" @on-change="val => mainQuery.parentId = val"></cascader-system-node>
      </el-form-item>

      <el-form-item :label="$t('page-announcement.d2-crud.column-title')" size="mini" prop="">
        <el-input placeholder="" v-model="mainQuery.title" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item :label="$t('page.form.enTitle')" size="mini" prop="">
        <el-input placeholder="" v-model="mainQuery.enTitle" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item :label="$t('page.form.icon')" size="mini" prop="">
        <el-input placeholder="" v-model="mainQuery.icon" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item :label="$t('page.form.nodetypes')" size="mini" prop="">
        <el-radio-group v-model="mainQuery.type">
          <el-radio-button v-for="(item,index) in typeOptions" :key="index" :label="item.value">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('page.form.Whetherlinkout')" size="mini" prop="">
        <el-radio-group v-model="mainQuery.isLink">
          <el-radio-button v-for="(item,index) in boolOptions" :key="index" :label="item.value">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <template v-if="mainQuery.isLink == 1">
        <el-form-item :label="$t('page.form.location')" size="mini" prop="">
          <el-input placeholder="" v-model="mainQuery.url" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
      </template>

      <template v-if="mainQuery.type == 2">
        <el-form-item :label="$t('page.form.permissionidentify')" size="mini" prop="">
          <el-input placeholder="" v-model="mainQuery.authName" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
      </template>
      <template v-else-if="mainQuery.type == 1 && mainQuery.isLink == 0">
        <el-form-item :label="$t('page.form.routername')" size="mini" prop="">
          <el-input placeholder="" v-model="mainQuery.routeName" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>

        <el-form-item :label="$t('page.form.routingaddress')" size="mini" prop="">
          <el-input placeholder="" v-model="mainQuery.routePath" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>

        <el-form-item :label="$t('page.form.Routingcomponent')" size="mini" prop="">
          <el-input placeholder="" v-model="mainQuery.routeComponent" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>

        <el-form-item :label="$t('page.form.routingcache')" size="mini" prop="">
          <el-radio-group v-model="mainQuery.routeCache">
            <el-radio-button v-for="(item,index) in boolOptions" :key="index" :label="item.value">{{item.label}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </template> 

      <el-form-item :label="$t('page.form.AccordingSorting')" size="mini" prop="">
        <el-input placeholder="" v-model="mainQuery.sort" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item :label="$t('page.form.state')" size="mini" prop="">
        <el-radio-group v-model="mainQuery.status">
          <el-radio-button v-for="(item,index) in statusOptions" :key="index" :label="item.value">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>

    </el-form>
      <div slot="footer" class="dialog-footer">
        <div style="float: left;">
          <el-checkbox v-model="continueMode" border size="mini" v-if="!id">{{ $t('page.form.tips64') }}</el-checkbox>
        </div>
        <el-button @click="close" size="mini">{{ $t('page.form.cancel') }}</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading">{{ $t('page.form.submit') }}</el-button>
      </div>
  </el-dialog>
</template>

<script>

import CascaderSystemNode from '@/components/system/cascader-system-node';

import ApiMain from '@/api/system.node';

export default {
  mixins: [
  ],
  props: [
    'statusOptions',
    'boolOptions',
    'typeOptions',
  ],
  components: {
    CascaderSystemNode,
  },
  data () {
    return {

      dialogVisible   : false,
      popDeleteVisible: false,
      loading         : false,

      continueMode: false,

      mainQueryRaw: null,
      mainQuery: {
        parentId      : "",
        title         : "",
        enTitle       : "",
        icon          : "",
        url           : "",
        routePath     : "",
        routeComponent: "",
        routeName     : "",
        authName      : new Date().getTime(),
        sort          : 100,
        type          : 1,
        routeCache    : 0,
        isLink        : 0,
        status        : 1,
      },

      rules: {
        name: [
          { required: true, message: this.$t('page.form.pleaseentername'), trigger: 'blur' },
        ],
        status: [
          { required: true, message: this.$t('page.form.pleaseselectstatus'), trigger: 'blur' },
        ],
      },

      id    : null,
      data  : null,

    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (param) {

      this.reset();

      if (!!param) {
        if (param.id) {
          this.data = param;
          this.id = param.id;
          this.fetchData();
        }

        for (var k in this.mainQuery) {
          if (param.hasOwnProperty(k)) {
            this.mainQuery[k] = param[k];
          }
        }
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {

      this.mainQuery = Object.copy(this.mainQueryRaw);

      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.$refs['cascader-system-node'] && this.$refs['cascader-system-node'].fetchOptions();
        
      this.id     = null;
      this.data   = null;

      this.$refs['auto-focus'] && this.$refs['auto-focus'].focus();
    },

    async fetchData () {

      this.loading = true;

      try {
        var re = await ApiMain.info({id: this.id});
        this.data = re;
      } catch (err) {
        this.data = null;
      }

      for (var k in this.mainQuery) {
        this.mainQuery[k] = this.data[k];
      }

      this.loading = false;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      if (this.id) {
        await this.submitSet();
      }
      else {
        await this.submitAdd();
      }

      this.loading = false;

    },

    async submitAdd () {

      var req = Object.copy(this.mainQuery);
      if (!req.parentId) {
        req.parentId = '';
      }

      try {
        await ApiMain.add(req);
        this.$message({message: this.$t('page-form.form.successfullyadded'), type: 'success'});

        if (this.continueMode) {
          this.show({parentId: this.mainQuery.parentId});
          this.$emit('dialog-close');
        }
        else {
          this.close();
        }
      } catch (err) {
      }

    },

    async submitSet () {

      var req = Object.copy(this.mainQuery);
      if (!req.parentId) {
        req.parentId = '';
      }

      req.id = this.id;

      try {
        await ApiMain.set(req);
        this.$message({message: this.$t('page-form.form.modifysuccessfully'), type: 'success'});
        this.close();
      } catch(e) {
      }

    },

    async submitDel () {
      this.popDeleteVisible = false;
      this.loading = true;

      try {
        await ApiMain.del({id: this.id})
        this.$message({message: this.$t('page-form.form.successfullydelete'), type: 'success'});
        this.close();
      } catch(e) {
      }

      this.loading = false;

    },
  }
}
</script>

<style>

</style>
